<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    table{
      border: 1px solid #c0c0c0;
      border-collapse: collapse;
      border-spacing: 0;
    }
    th,td{
      border: 1px solid #c0c0c0;
      color: #404060;
      padding:10px;
    }
    th{
      background-color: #09c;
      font:bold 16px '微软雅黑';
      color: #fff;
    }
    td{
      font:14px '微软雅黑';
    }
    tbody tr{
      background-color: #f0f0f0;
    }
    tbody tr:hover{
      cursor: pointer;
      background-color: #fafafa;
    }
  </style>
</head>
<body>
  <input type="button" value="获取数据" id="btn">
  <table>
    <thead>
      <tr>
       <th>标题</th>
       <th>地址</th>
       <th>说明</th>
      </tr>
    </thead>
    <tbody id="tbData">
      
    </tbody>
  </table>
  <script src="../jquery-1.12.4.min.js"></script>
  <script>
    //模拟从后台拿到的数据
    var datas = [
      {
        name:'传智博客',
        url:'http://www.itcast.cn',
        type:'IT最强培训机构'
      },
      {
        name:'黑马程序员',
        url:'http://www.itheima.com',
        type:'大学生IT培训机构'
      },
      {
        name:'传智前端学院',
        url:'http://web.itcast.cn',
        type:'前端的黄埔军校'
      },
      {
        name:'传智前端学院',
        url:'http://web.itcast.cn',
        type:'前端的黄埔军校'
      },
      {
        name:'传智前端学院',
        url:'http://web.itcast.cn',
        type:'前端的黄埔军校'
      },
    ]
    //步骤分析：
    // - 操作的元素：按钮
    // - 操作的方式：点击
    //  - 根据数据进行结果创建
    //    - 明确数据含义:(遍历数据，使用$.each(数据，函数))
    //    - datas是数组，数组中的元素个数代表tr个数
    //    - 每个元素的属性个数，代表每个tr中的td的个数，属性值就是td内容
    //  - 创建操作
    
    // 实现：
    var $tbody = $('#tbData');
    //1 给按钮设置点击事件
    $('#btn').click(function(){
      //2 根据数据datas,进行结果字符串拼接
      var str = '';
      $.each(datas,function(i,ele){
      //   //方式一：内部要创建的结构完全相同时可以直接使用
      //   //datas中的元素个数代表tr个数，进行tr结构拼接
      //   str += '<tr>';
      //     // 需要根据当前遍历的对象ele,进行td结构拼接
      //     $.each(ele,function(key,value){
      //       //属性个数代表td个数，属性值代表td内容
      //       str += '<td>'+value+'</td>';
      //     })
      //   str += '</tr>';

        //方式二：要创建的内部结构不完全相同
        // - 增加需求：让地址部分可以点击跳转(设置a标签)
        // - 由于内部结构不完全相同，应当先设置好多有的结构
        // - 进行结构设置的方式：
        //   - 1 因为js的字符串中不能换行，可以将换行去除(可读性减低)
        //   - 2 通过进行字符串拼接操作，避免问题
        // str +=
        // '<tr>'+
        //   '<td></td>'+
        //   '<td><a href=""></a></td>'+
        //   '<td></td>'+
        // '</tr>'
        //   - 3 通过设置转义字符，取消换行符的影响
        str +=
       ' <tr>\
          <td>'+ele.name+'</td>\
          <td><a href="'+ele.url+'">'+ele.url+'</a></td>\
          <td>'+ele.type+'</td>\
        </tr>';
      });
      $tbody.html(str);
    });
  </script>
 
</body>
</html>